<script setup>
import Film from '/@/components/common/film/Film.vue';
import FilmItem from '/@/components/common/film/FilmItem.vue';
import PictureSelectorDialog from '/@/components/pictureSelector/PictureSelectorDialog.vue';
import { arrHasData } from '/@/utils';
const props = defineProps({
	modelValue: {
		type: Array,
		default: () => [],
	},
	mainPic: {
		type: Boolean,
		default: false,
	},
});
const emit = defineEmits(['update:modelValue']);
const isShowPicSelector = ref(false);
const picList = computed(() => props.modelValue || []);
const getPic = (pic) => {
	const picListArr = pic.map(({ imgUrl }) => {
		return { src: imgUrl };
	});
	picList.value.push(...picListArr);
	emit('update:modelValue', picList.value);
};
const delPic = (index) => {
	picList.value.splice(index, 1);
	emit('update:modelValue', picList.value);
};
const setMain = (item) => {
	picList.value.forEach((val) => {
		val.isMain = 0;
	});
	item.isMain = 1;
	emit('update:modelValue', picList.value);
};
const maxLength = computed(() => (arrHasData(picList.value) ? 5 - picList.value.length : 5));
</script>
<template>
	<div class="ImgSet">
		<div class="btn">
			<a href="javascript:;" @click="isShowPicSelector = true">
				<el-icon><Plus /></el-icon>
			</a>
		</div>
		<div class="film_wrap">
			<Film>
				<FilmItem v-for="(item, index) in picList" :key="index" width="200px">
					<div class="img_wrap">
						<Img :src="item.src" />
						<div v-if="mainPic" class="set_main_btn">
							<span v-if="item.isMain" class="main_item">主图</span>
							<a v-else href="javascript:;" @click="setMain(item)">设为主图</a>
						</div>
						<a href="javascript:;" class="del_btn" @click="delPic(index)">
							<el-icon><CloseBold /></el-icon>
						</a>
					</div>
				</FilmItem>
			</Film>
		</div>
		<PictureSelectorDialog v-model="isShowPicSelector" :maxLength="maxLength" @submit="getPic" />
	</div>
</template>

<style lang="scss" scoped>
.ImgSet {
	display: flex;
	padding: 10px 5px;
	border: 1px solid var(--el-color-primary);
	.film_wrap {
		flex: 1;
		overflow: hidden;
		.img_wrap {
			display: flex;
			flex-direction: column;
			position: relative;
			width: 200px;
			height: 200px;
			text-align: center;
			.set_main_btn {
				height: 20px;
				margin-top: 10px;
				a {
					display: none;
					color: var(--el-color-primary);
				}
				.main_item {
					display: inline;
					color: var(--el-color-primary);
				}
			}
			.del_btn {
				position: absolute;
				top: 6px;
				right: 6px;
				display: none;
				&:hover {
					.icon {
						color: var(--el-color-primary);
					}
				}
			}
			&:hover {
				a {
					display: inline;
				}
			}
		}
	}
	.btn {
		flex-shrink: 0;
		width: 100px;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		a {
			display: block;
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border: 1px solid var(--el-color-primary);
			border-radius: 4px;
		}
	}
}
</style>
